<template>
    <div>
        <!---------------------------------------------------------------第一步,绑定手机号-->
        <div class="steps stepsOne">
            <div class="OnePhone">
                <span>手机号</span>
                <input type="text" ref="OneMobilePhone" id="OneMobilePhone"  oninput = "value=value.replace(/[^\d]/g,'')" @focus="focus" @blur="blur"/>
                <!--icon图标  class名错误(el-icon-error)正确(el-icon-success)-->
                <i :class="icon? iconClass: ''" style="margin-left: 10px;"></i>
            </div>
            <div class="OneCode">
                <span>验证码</span>
                <input ref="OneMobileCode" id="OneMobileCode"  type="text">
                <!----------------------------------------------------------------------------------获取验证码-->
                <p @click="getCode">{{CodeText}}</p>
            </div>
            <div class="toTwo" @click="toTwo">下一步</div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "RegisterOne",
        data(){
            return{
                // 存储数据,第一步数据
                RegisterOne:{
                    "RegisterMobile":"",
                    "RegisterCode":""
                },
                // -------------------------------绑定手机号步骤一data值
                // 第一步,判断手机号格式是否正确
                isMobile: false,
                //是否显示输入框后面的icon
                icon:false,
                // 手机号输入框后面icon的class
                iconClass:'el-icon-success colorGreen',
                CodeText: "免费获取验证码",
                // 获取手机验证码倒计时是否为0
                isZero: false,
            }
        },
        methods:{
            // ---------------------------------------------------------------------------------------------第一步事件
            // 手机号输入框获取焦点
            focus(){
                this.icon = false;
            },
            // 手机号input框失去焦点
            blur(){
                this.icon = true;
                // -------------------------------------------手机号输入框不为空
                if(this.$refs.OneMobilePhone.value != ''){
                    // 判断手机号是否为真
                    this.isMobile = this.global.mobleVerify(this.$refs.OneMobilePhone.value);
                    if(this.isMobile){
                        //手机号格式对
                        this.iconClass = "el-icon-success colorGreen";
                    }else{
                        //手机号格式不对
                        this.iconClass = "el-icon-error colorRed";
                    }
                }else{
                    //------------------------------------------手机号输入框为空
                    this.iconClass = "el-icon-error colorRed";
                }
            },
            // 获取验证码
            getCode(){
                console.log(this.isMobile, this.$refs.OneMobilePhone.value);
                if(this.isMobile){
                    // 本地存储手机号
                    this.RegisterOne.RegisterMobile = this.$refs.OneMobilePhone.value;
                    var num = 60;
                    // 判断倒计时是否为零
                    if(this.isZero){
                        // 如果正在倒计时弹出请60秒后再试
                        this.$message.closeAll();
                        this.$message({
                            message: '请60秒后再试!',
                            type: 'warning'
                        });
                        return;
                    }
                    // 发送请求
                    var data = {
                        mobile: "18338732898"
                    };
                    data.sign = this.global.ASCII_MD5(data);
                    axios.post('sendMessage',data).then(res=>{
                        if(res.data.status == 200){
                            // 如果手机号格式正确,获取验证码,倒计时
                            this.$message.closeAll();
                            this.$message({
                                message: '发送验证码成功!请注意查收',
                                type: 'success'
                            });
                            this.isZero = true;
                            num = num - 1;
                            this.CodeText = "重发验证码（" + num + "s）";
                            var getCode = setInterval(()=>{
                                if(num == 1){
                                    this.isZero = false;
                                    clearInterval(getCode);
                                    this.CodeText = "免费获取验证码";
                                    return;
                                }
                                num = num - 1;
                                this.CodeText = "重发验证码（" + num + "s）";
                            },1000);
                        }else{
                            console.log(res);
                            this.$message.closeAll();
                            this.$message({
                                message: '发送验证码失败!请刷新后再试!',
                                type: 'error'
                            });
                            return;
                        }
                    });
                }else{
                    this.$message.closeAll();
                    this.$message.error('您输入的手机号格式有误,请重新输入');
                }
            },
            // 进入第二步
            toTwo(){
                // 验证手机号
                if(!this.isMobile){
                    this.$message.closeAll();
                    this.$message.error('您输入的手机号格式有误,请重新输入');
                    return;
                }
                // 验证手机验证码
                if(this.$refs.OneMobileCode.value != ""){
                    // 本地存储第一步数据
                    this.RegisterOne.RegisterMobile = this.$refs.OneMobilePhone.value;
                    this.RegisterOne.RegisterCode = this.$refs.OneMobileCode.value;
                    // 本地存储第一步数据(过期时间5分钟)
                    localStorage.setExpire("RegisterOne",JSON.stringify(this.RegisterOne),1000*60*10);
                    this.$router.push("/registerTwo");
                }else{
                    this.$message.closeAll();
                    this.$message.error('您输入的验证码有误,请重新输入');
                }
            },
        },
        mounted(){
            // 获取存储的数据,页面赋值
            if(localStorage.getExpire("RegisterOne")){
                var RegisterOne = JSON.parse(localStorage.getExpire("RegisterOne"));
                $("#OneMobilePhone").val(RegisterOne.RegisterMobile);
                $("#OneMobileCode").val(RegisterOne.RegisterCode);
                this.blur();
            }
            //在页面刷新时步骤index保存到localStorage里
            window.addEventListener("beforeunload",()=>{
                localStorage.setItem("RegisterIndex",1);
            });
        }
    }
</script>

<style scoped>
    /***************************************************************中心One步骤一*/
    .OnePhone{
        margin-top: 100px;
        margin-left: 430px;

    }
    .OnePhone span,.OneCode span{
        font-size:16px;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .OnePhone input,.OneCode input{
        width:260px;
        height:38px;
        font-size:16px;
        text-indent: 10px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        margin-left: 25px;
    }
    .OneCode{
        margin-left: 430px;
        margin-top: 20px;
    }
    .OneCode input{
        width: 110px;
        display: inline-block;
    }
    .OneCode p{
        display: inline-block;
        width:150px;
        height:38px;
        line-height: 38px;
        text-align: center;
        background:rgba(250,250,250,1);
        border:1px solid rgba(217,217,217,1);
        border-radius:5px;
        margin-left: 10px;
        color: #FA3D0D;
        font-size: 16px;
        cursor: pointer;
    }
    .toTwo{
        width:120px;
        height:40px;
        font-size:20px;
        line-height: 40px;
        text-align: center;
        color: #FFFFFF;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        margin-left: 504px;
        margin-top: 60px;
        cursor: pointer;
    }


    /*浮动*/
    .left{
        float: left;
    }
    .right{
        float: right;
    }

    .colorRed{
        color: red;
    }
    .colorGreen{
        color: green;
    }
</style>
